<template>
  <div>
    <basic-container-one>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true">
        <div style="margin-top: 22px">
          <el-form-item>
            <el-input clearable v-model="formInline.gameName" placeholder="游戏名称"/>
          </el-form-item>
          <el-form-item>
            <el-input clearable v-model="formInline.userAccount" placeholder="玩家账号"/>
          </el-form-item>
          <el-form-item>
            <el-input clearable v-model="formInline.gameOrder" placeholder="订单号"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model=" formInline.payWay " clearable placeholder="支付方式">
              <el-option label="微信" value="微信支付"></el-option>
              <el-option label="支付宝" value="支付宝"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleExport"   >下载</el-button>
          </el-form-item>
        </div>
      </el-form>
    </basic-container-one>
    <basic-container>

      <el-row>
        <el-col :span="24">
          <template>
            <el-table
              :data="tableData"
              stripe
              :summary-method="getSumDeposit"
              show-summary
              style="width: 100%">
              <el-table-column
                prop="gameOrder"
                label="订单号" key="2">
              </el-table-column>
              <el-table-column
                prop="userAccount"
                label="玩家账号" key="1">
              </el-table-column>

              <el-table-column
                prop="payAmount"
                label="金额">
                <template slot-scope="scope">
                <span
                  class="skucost-pruice">{{ (Number(scope.row.payAmount)).toFixed(2) }}</span>
                </template>
              </el-table-column>

              <el-table-column
                prop="gameName"
                label="游戏" key="4">
              </el-table-column>

              <el-table-column
                prop="payWay"
                label="充值方式">
              </el-table-column>

              <el-table-column
                prop="payTime"
                label="付款时间">
                <template slot-scope="scope">
                <span v-if="scope.row.payTime!=''"><span
                  class="skucost-pruice">{{ scope.row.payTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
                </template>
              </el-table-column>

            </el-table>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10,20, 50, 100, 200]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </el-col>
      </el-row>

    </basic-container>


  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>

<script>

import {directConsume, directConsumeTotal} from "@/api/system/details";
import {getToken} from "@/util/auth";
import {cloneObj, parseParam} from "@/util/util";
import VueElementLoading from 'vue-element-loading';
import roleDeatils from "@/views/role/deatils";
export default {
  data() {
    return {
      isShowPayTime:false,
      isshowtrue:false,
      mode:'',
      isActive: false,
      leading:true,
      input:'',
      select: '账号名称',
      row:{},
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      time: null,
      spendCount:{},
      formInline: {
        gameName:'',
        userAccount: '',
        gameOrder:'',
        payWay:''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData:[],

    };

  },
  components: {
    VueElementLoading
  },
  computed: {},
  created() {
    var startTime = undefined;
    var endTime = undefined;
    this.onload(startTime, endTime);
  },
  methods: {
    getSumDeposit() {
      let sums = [];
      sums[0] = '总计(小写)'
      sums[2] = this.spendCount.payAmount

      for(let i=0; i<=5; i++) {
        if(sums[i] === undefined) {
          sums[i] = '--'
        }
      }
      sums = sums.map(item =>{
        if((typeof item) == "number"){
          return (item).toFixed(2)
        }else{
          return item
        }
      });
      return sums;
    },
    handleExport() {
      this.$confirm("是否导出直冲玩家明细数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formInline)
        if (this.isNotEmpty(this.time)) {
          forming.startTime = this.time[0].getTime()
          forming.endTime = this.time[1].getTime()
        }
        window.location.href = `/api/blade-details/spend/export-directConsume?blade-auth=${getToken()}&${parseParam(forming)}`;

      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      var startTime = undefined;
      var endTime = undefined;
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.onload(startTime, endTime);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      var startTime = undefined;
      var endTime = undefined;
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.onload(startTime, endTime);
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    onSubmit() {
      var startTime = undefined;
      var endTime = undefined;
      this.page.currentPage=1
      this.onload(startTime, endTime);
    },

    onload(startTime,endTime){

      if(this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }

      this.isActive = true;
      directConsume(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime,endTime).then(res => {
        this.isActive = false;
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
        directConsumeTotal(Object.assign(this.formInline), startTime,endTime).then(res => {
          this.isActive = false;
          console.log("res",res)
          const data = res.data.data;
          this.spendCount = data
        });
      });

    },
  }
}

</script>

<style>
.customViewUser1{
  width: 30%;
  background-color: #FFFFFF !important;
}
</style>
